<!DOCTYPE html>
<!-- HTML5文档类型声明 -->
<html lang="zh-CN">
<!-- 文档根元素，设置语言为简体中文 -->

<head>
    <!-- 文档头部，包含元数据和资源引用 -->
    <meta charset="UTF-8">
    <!-- 字符编码设置为UTF-8，支持中文显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 视口设置，使页面适应移动设备 -->
    <title>电竞狙击训练</title>
    <!-- 页面标题显示在浏览器标签页上 -->

    <style>
        /* 全局样式 */
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            cursor: none;
            user-select: none;
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-family: Arial, sans-serif;
        }

        #game-container {
            position: relative;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
        }

        /* 开始界面样式 */
        #start-screen {
            position: absolute;
            /* 绝对定位 */
            top: 0;
            /* 顶部对齐 */
            left: 0;
            /* 左侧对齐 */
            width: 100%;
            /* 宽度100% */
            height: 100%;
            /* 高度100% */
            background-color: rgba(0, 0, 0, 0.7);
            /* 半透明黑色背景 */
            display: flex;
            /* 弹性布局 */
            flex-direction: column;
            /* 垂直排列 */
            align-items: center;
            /* 水平居中 */
            justify-content: center;
            /* 垂直居中 */
            color: white;
            /* 文字颜色白色 */
            z-index: 100;
            /* 高z-index确保在最上层 */
        }

        /* 开始按钮样式 */
        #start-button {
            padding: 15px 30px;
            /* 内边距 */
            font-size: 20px;
            /* 字体大小 */
            background-color: #ff4655;
            /* 背景色 */
            color: white;
            /* 文字颜色 */
            border: none;
            /* 无边框 */
            border-radius: 5px;
            /* 圆角 */
            cursor: pointer;
            /* 鼠标指针样式 */
            margin-top: 20px;
            /* 上边距 */
        }

        /* 开始按钮悬停效果 */
        #start-button:hover {
            background-color: #e03e4c;
            /* 悬停时背景色变深 */
        }

        /* 准星样式 */
        #crosshair {
            position: absolute;
            /* 绝对定位 */
            width: 30px;
            /* 宽度 */
            height: 30px;
            /* 高度 */
            pointer-events: none;
            /* 不响应鼠标事件 */
            z-index: 10;
            /* 显示层级 */
        }

        /* 假人基础样式 */
        .dummy {
            position: absolute;
            /* 绝对定位 */
            pointer-events: none;
            /* 不响应鼠标事件 */
        }

        /* 假人头部样式 */
        .dummy-head {
            position: absolute;
            /* 绝对定位 */
            border-radius: 50%;
            /* 圆形 */
            border: 2px solid black;
            /* 黑色边框 */
            background-color: #d2b48c;
            /* 淡棕色背景 */
            box-sizing: border-box;
            /* 盒模型计算方式 */
        }

        /* 假人身体样式 */
        .dummy-body {
            position: absolute;
            /* 绝对定位 */
            border: 2px solid black;
            /* 黑色边框 */
            background-color: #d2b48c;
            /* 淡棕色背景 */
            box-sizing: border-box;
            /* 盒模型计算方式 */
            border-radius: 10px;
            /* 圆角 */
        }

        /* 假人手臂样式 */
        .dummy-arm {
            position: absolute;
            /* 绝对定位 */
            border: 2px solid black;
            /* 黑色边框 */
            background-color: #d2b48c;
            /* 淡棕色背景 */
            box-sizing: border-box;
            /* 盒模型计算方式 */
            border-radius: 5px;
            /* 小圆角 */
        }

        /* 假人腿部样式 */
        .dummy-leg {
            position: absolute;
            /* 绝对定位 */
            border: 2px solid black;
            /* 黑色边框 */
            background-color: #d2b48c;
            /* 淡棕色背景 */
            box-sizing: border-box;
            /* 盒模型计算方式 */
            border-radius: 3px;
            /* 最小圆角 */
        }

        /* 障碍物基础样式 */
        .obstacle {
            position: absolute;
            /* 绝对定位 */
            border: 2px solid black;
            /* 黑色边框 */
            box-sizing: border-box;
            /* 盒模型计算方式 */
        }

        /* 绿色障碍物样式 */
        .obstacle-green {
            background-color: #4CAF50;
            z-index: 1;
            /* 单个等腰三角形 */
            clip-path: polygon(0% 100%,
                    /* 左下角 */
                    50% 0%,
                    /* 顶点 */
                    100% 100%
                    /* 右下角 */
                );
        }

        /* 灰色障碍物样式 */
        .obstacle-gray {
            background-color: #808080;
            z-index: 1;
            /* 上边短下边长的等腰梯形 */
            clip-path: polygon(25% 0%,
                    /* 左上角 (上边左端点) */
                    75% 0%,
                    /* 右上角 (上边右端点) */
                    100% 100%,
                    /* 右下角 (下边右端点) */
                    0% 100%
                    /* 左下角 (下边左端点) */
                );
            /* 增加默认尺寸 */
            width: 120px;
            height: 80px;
        }

        /* 得分显示样式 */
        #score-display {
            position: absolute;
            /* 绝对定位 */
            top: 20px;
            /* 距顶部20px */
            left: 20px;
            /* 距左侧20px */
            color: black;
            /* 黑色文字 */
            font-size: 24px;
            /* 字体大小 */
            background-color: rgba(255, 255, 255, 0.7);
            /* 半透明白色背景 */
            padding: 10px;
            /* 内边距 */
            border-radius: 5px;
            /* 圆角 */
            z-index: 5;
            /* 显示层级 */
        }

        /* 计时器样式 */
        #timer {
            position: absolute;
            /* 绝对定位 */
            top: 20px;
            /* 距顶部20px */
            right: 20px;
            /* 距右侧20px */
            color: black;
            /* 黑色文字 */
            font-size: 24px;
            /* 字体大小 */
            background-color: rgba(255, 255, 255, 0.7);
            /* 半透明白色背景 */
            padding: 10px;
            /* 内边距 */
            border-radius: 5px;
            /* 圆角 */
            z-index: 5;
            /* 显示层级 */
        }

        /* 结束界面样式 */
        #end-screen {
            position: absolute;
            /* 绝对定位 */
            top: 0;
            /* 顶部对齐 */
            left: 0;
            /* 左侧对齐 */
            width: 100%;
            /* 宽度100% */
            height: 100%;
            /* 高度100% */
            background-color: rgba(0, 0, 0, 0.8);
            /* 半透明黑色背景 */
            display: none;
            /* 初始隐藏 */
            flex-direction: column;
            /* 垂直排列 */
            align-items: center;
            /* 水平居中 */
            justify-content: center;
            /* 垂直居中 */
            color: white;
            /* 白色文字 */
            z-index: 100;
            /* 高显示层级 */
        }

        /* 假人模型容器样式 */
        .dummy-model {
            position: relative;
            /* 相对定位 */
            width: 200px;
            /* 宽度 */
            height: 300px;
            /* 高度 */
            margin: 20px;
            /* 外边距 */
        }

        /* 命中率指示线样式 */
        .hit-line {
            position: absolute;
            /* 绝对定位 */
            height: 2px;
            /* 高度 */
            background-color: white;
            /* 白色背景 */
            transform-origin: left center;
            /* 变换原点 */
        }

        /* 命中率标签样式 */
        .hit-label {
            position: absolute;
            /* 绝对定位 */
            color: white;
            /* 白色文字 */
            font-size: 16px;
            /* 字体大小 */
        }

        /* 时间统计容器样式 */
        .time-stats {
            display: flex;
            /* 弹性布局 */
            justify-content: space-around;
            /* 均匀分布 */
            width: 80%;
            /* 宽度80% */
            margin-top: 20px;
            /* 上边距 */
        }

        /* 单个时间统计样式 */
        .time-stat {
            display: flex;
            /* 弹性布局 */
            flex-direction: column;
            /* 垂直排列 */
            align-items: center;
            /* 水平居中 */
        }

        /* 开始界面标题 */
        #start-screen h1 {
            font-size: 2.5em;
            /* 从默认大小调大 */
            margin-bottom: 20px;
        }

        /* 开始界面说明文字 */
        #start-screen p {
            font-size: 1.2em;
            /* 从默认大小调大 */
            margin: 5px 0;
        }

        /* 结束界面标题 */
        #end-screen h1 {
            font-size: 2.5em;
            /* 从默认大小调大 */
            margin-bottom: 20px;
        }

        /* 结束界面得分 */
        #end-screen h2 {
            font-size: 1.8em;
            /* 从默认大小调大 */
            margin-bottom: 20px;
        }

        /* 时间统计标题 */
        .time-stat h3 {
            font-size: 1.3em;
            /* 从默认大小调大 */
        }

        /* 时间统计百分比 */
        .time-stat p {
            font-size: 1.2em;
            /* 从默认大小调大 */
        }

        .dummy-model {
            position: relative;
            width: 300px;
            /* 增加宽度以容纳假人和指示线 */
            height: 150px;
            margin: 20px auto;
            /* 居中 */
            display: flex;
        }

        .hit-line {
            position: absolute;
            height: 2px;
            background-color: white;
            transform-origin: left center;
        }

        .hit-label {
            position: absolute;
            color: white;
            font-size: 16px;
            white-space: nowrap;
        }
    </style>
    <!-- 结束样式部分 -->
</head>
<!-- 结束头部 -->

<body>
    <!-- 文档主体开始 -->
    <div id="game-container">
        <!-- 游戏主容器 -->
        <div id="start-screen">
            <!-- 开始界面 -->
            <h1>电竞狙击训练</h1>
            <!-- 主标题 -->
            <p>点击开始进行20个目标的狙击训练</p>
            <!-- 说明文字 -->
            <p>得分规则：</p>
            <!-- 得分规则标题 -->
            <p>- 第1秒命中：3分，第2秒：2分，第3秒：1分</p>
            <!-- 时间得分规则 -->
            <p>- 头部命中：+2分，身体命中：+1分，手臂命中：+1分，腿部命中：+0.5分</p>
            <!-- 部位得分规则 -->
            <p>- 绿色障碍物(三个三角形)可以穿透</p>
            <!-- 绿色障碍物说明 -->
            <p>- 灰色障碍物(梯形)会阻挡子弹</p>
            <!-- 灰色障碍物说明 -->
            <button id="start-button">开始游戏</button>
            <!-- 开始游戏按钮 -->
        </div>
        <!-- 结束开始界面 -->

        <div id="end-screen">
            <!-- 结束界面 -->
            <h1>游戏结束</h1>
            <!-- 结束标题 -->
            <h2>你的得分: <span id="final-score">0</span></h2>
            <!-- 最终得分显示 -->
            <div class="dummy-model">
                <!-- 假人模型容器 -->
                <!-- 假人模型将通过JavaScript动态生成 -->
            </div>
            <!-- 时间统计容器 -->
            <div class="time-stats">
                <div class="time-stat">
                    <h3>第1秒命中</h3>
                    <p id="first-second">0%</p>
                </div>
                <div class="time-stat">
                    <h3>第2秒命中</h3>
                    <p id="second-second">0%</p>
                </div>
                <div class="time-stat">
                    <h3>第3秒命中</h3>
                    <p id="third-second">0%</p>
                </div>
            </div>
            <button id="restart-button">重新开始</button>
            <!-- 重新开始按钮 -->
        </div>
        <!-- 结束结束界面 -->

        <div id="score-display">得分: 0</div>
        <!-- 得分显示区域 -->
        <div id="timer">目标: 0/20</div>
        <!-- 目标计数显示 -->

        <!-- 准星图像（base64编码的SVG） -->
        <img id="crosshair"
            src=""
            alt="准星">
    </div>
    <!-- 结束游戏容器 -->

    <script>
        // ========== 游戏变量声明 ==========
        let score = 0;
        let targetsHit = 0;
        let gameActive = false;
        let targetTimeout = null;
        let targetAppearTime = 0;
        let dummyParts = [];
        let obstacles = [];
        let targetInFront = false;

        // ========== 命中统计数据 ==========
        let hitStats = {
            head: 0,
            body: 0,
            arms: 0,
            legs: 0,
            firstSecond: 0,
            secondSecond: 0,
            thirdSecond: 0,
            totalHits: 0
        };

        // ========== DOM元素引用 ==========
        const gameContainer = document.getElementById('game-container');
        const startScreen = document.getElementById('start-screen');
        const endScreen = document.getElementById('end-screen');
        const startButton = document.getElementById('start-button');
        const restartButton = document.getElementById('restart-button');
        const crosshair = document.getElementById('crosshair');
        const scoreDisplay = document.getElementById('score-display');
        const timerDisplay = document.getElementById('timer');
        const finalScoreDisplay = document.getElementById('final-score');
        const firstSecondDisplay = document.getElementById('first-second');
        const secondSecondDisplay = document.getElementById('second-second');
        const thirdSecondDisplay = document.getElementById('third-second');
        const dummyModel = document.querySelector('.dummy-model');

        // ========== 事件监听器 ==========
        document.addEventListener('mousemove', (e) => {
            crosshair.style.left = (e.clientX - 15) + 'px';
            crosshair.style.top = (e.clientY - 15) + 'px';
        });

        startButton.addEventListener('click', startGame);
        restartButton.addEventListener('click', startGame);

        document.addEventListener('mousedown', (e) => {
            if (!gameActive || e.button !== 0) return;

            if (!targetInFront) {
                const grayObstacleHit = checkGrayObstacleHit(e.clientX, e.clientY);
                if (!targetInFront && grayObstacleHit)
                    return;
            }

            if (dummyParts.length > 0) {
                const crosshairRect = crosshair.getBoundingClientRect();
                const crosshairCenterX = crosshairRect.left + crosshairRect.width / 2;
                const crosshairCenterY = crosshairRect.top + crosshairRect.height / 2;

                let hitPart = null;
                let points = 0;

                for (const part of dummyParts) {
                    const rect = part.element.getBoundingClientRect();
                    if (
                        crosshairCenterX >= rect.left &&
                        crosshairCenterX <= rect.right &&
                        crosshairCenterY >= rect.top &&
                        crosshairCenterY <= rect.bottom
                    ) {
                        hitPart = part;
                        break;
                    }
                }

                if (hitPart) {
                    const timeElapsed = (Date.now() - targetAppearTime) / 1000;
                    let timeBonus = 0;

                    if (timeElapsed < 1) {
                        timeBonus = 3;
                        hitStats.firstSecond++;
                    } else if (timeElapsed < 2) {
                        timeBonus = 2;
                        hitStats.secondSecond++;
                    } else {
                        timeBonus = 1;
                        hitStats.thirdSecond++;
                    }

                    switch (hitPart.type) {
                        case 'head':
                            points = timeBonus + 2;
                            hitStats.head++;
                            break;
                        case 'body':
                        case 'arm':
                            points = timeBonus + 1;
                            hitStats.body++;
                            break;
                        case 'leg':
                            points = timeBonus + 0.5;
                            hitStats.legs++;
                            break;
                    }

                    hitStats.totalHits++;
                    score += points;
                    targetsHit++;

                    scoreDisplay.textContent = `得分: ${score.toFixed(1)}`;
                    timerDisplay.textContent = `目标: ${targetsHit}/20`;

                    clearTimeout(targetTimeout);
                    removeDummy();

                    if (targetsHit >= 20) {
                        // 直接调用endGame而不是通过setTimeout
                        endGame();
                    } else {
                        setTimeout(spawnDummy, 800);
                    }
                }
            }
        });

        // ========== 游戏功能函数 ==========
        function checkGrayObstacleHit(x, y) {
            for (const obstacle of obstacles) {
                if (obstacle.classList.contains('obstacle-gray')) {
                    const rect = obstacle.getBoundingClientRect();
                    if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
                        return true;
                    }
                }
            }
            return false;
        }

        function createObstacles() {
            clearObstacles();
            const obstacleCount = 5 + Math.floor(Math.random() * 4);

            for (let i = 0; i < obstacleCount; i++) {
                const obstacle = document.createElement('div');
                obstacle.className = 'obstacle';

                const isGray = Math.random() > 0.5;
                if (isGray) {
                    obstacle.classList.add('obstacle-gray');
                    obstacle.style.width = `${100 + Math.random() * 80}px`;
                    obstacle.style.height = `${60 + Math.random() * 60}px`;
                } else {
                    obstacle.classList.add('obstacle-green');
                    obstacle.style.width = `${120 + Math.random() * 100}px`;
                    obstacle.style.height = `${80 + Math.random() * 60}px`;
                }

                const left = Math.random() * (gameContainer.clientWidth - parseFloat(obstacle.style.width));
                const top = Math.random() * (gameContainer.clientHeight - parseFloat(obstacle.style.height));

                obstacle.style.left = `${left}px`;
                obstacle.style.top = `${top}px`;
                gameContainer.appendChild(obstacle);
                obstacles.push(obstacle);
            }
        }

        function clearObstacles() {
            obstacles.forEach(obstacle => {
                if (obstacle.parentNode) {
                    gameContainer.removeChild(obstacle);
                }
            });
            obstacles = [];
        }

        function removeDummy() {
            dummyParts.forEach(part => {
                if (part.element.parentNode) {
                    gameContainer.removeChild(part.element);
                }
            });
            dummyParts = [];
        }

        function startGame() {
            score = 0;
            targetsHit = 0;
            gameActive = true;

            endScreen.style.display = 'none';

            hitStats = {
                head: 0,
                body: 0,
                arms: 0,
                legs: 0,
                firstSecond: 0,
                secondSecond: 0,
                thirdSecond: 0,
                totalHits: 0
            };

            scoreDisplay.textContent = `得分: ${score.toFixed(1)}`;
            timerDisplay.textContent = `目标: ${targetsHit}/20`;
            startScreen.style.display = 'none';
            endScreen.style.display = 'none';

            createObstacles();
            spawnDummy();
        }

        function spawnDummy() {
            if (!gameActive || targetsHit >= 20) {
                // 确保在达到20个目标时调用endGame
                if (targetsHit >= 20) {
                    endGame();
                }
                return;
            }

            removeDummy();
            clearTimeout(targetTimeout);

            const sizeMultiplier = 0.8 + Math.random() * 0.4;
            const headSize = Math.round(40 * sizeMultiplier);
            const bodyWidth = Math.round(40 * sizeMultiplier);
            const bodyHeight = Math.round(60 * sizeMultiplier);
            const armWidth = Math.round(10 * sizeMultiplier);
            const armHeight = Math.round(40 * sizeMultiplier);
            const legWidth = Math.round(15 * sizeMultiplier);
            const legHeight = Math.round(50 * sizeMultiplier);

            const overlapWithObstacle = Math.random() < 0.3 && obstacles.length > 0;
            let left, top;
            targetInFront = false;

            if (overlapWithObstacle) {
                const obstacle = obstacles[Math.floor(Math.random() * obstacles.length)];
                const obstacleRect = obstacle.getBoundingClientRect();
                targetInFront = Math.random() > 0.5;

                left = obstacleRect.left + Math.random() * (obstacleRect.width - (bodyWidth + armWidth * 2));
                top = obstacleRect.top + Math.random() * (obstacleRect.height - (headSize + bodyHeight + legHeight));

                left = Math.max(0, Math.min(left, gameContainer.clientWidth - (bodyWidth + armWidth * 2)));
                top = Math.max(0, Math.min(top, gameContainer.clientHeight - (headSize + bodyHeight + legHeight)));

                if (targetInFront) {
                    obstacle.style.zIndex = '1';
                } else {
                    obstacle.style.zIndex = '3';
                }
            } else {
                left = Math.random() * (gameContainer.clientWidth - (bodyWidth + armWidth * 2));
                top = Math.random() * (gameContainer.clientHeight - (headSize + bodyHeight + legHeight));
            }

            const zIndex = targetInFront ? '4' : '2';

            // 创建假人各部位
            const head = document.createElement('div');
            head.className = 'dummy-head';
            head.style.width = `${headSize}px`;
            head.style.height = `${headSize}px`;
            head.style.left = `${left + (bodyWidth - headSize) / 2 + armWidth}px`;
            head.style.top = `${top}px`;
            head.style.zIndex = zIndex;
            gameContainer.appendChild(head);
            dummyParts.push({ element: head, type: 'head' });

            const body = document.createElement('div');
            body.className = 'dummy-body';
            body.style.width = `${bodyWidth}px`;
            body.style.height = `${bodyHeight}px`;
            body.style.left = `${left + armWidth}px`;
            body.style.top = `${top + headSize}px`;
            body.style.zIndex = zIndex;
            gameContainer.appendChild(body);
            dummyParts.push({ element: body, type: 'body' });

            const leftArm = document.createElement('div');
            leftArm.className = 'dummy-arm';
            leftArm.style.width = `${armWidth}px`;
            leftArm.style.height = `${armHeight}px`;
            leftArm.style.left = `${left}px`;
            leftArm.style.top = `${top + headSize + 10}px`;
            leftArm.style.zIndex = zIndex;
            gameContainer.appendChild(leftArm);
            dummyParts.push({ element: leftArm, type: 'arm' });

            const rightArm = document.createElement('div');
            rightArm.className = 'dummy-arm';
            rightArm.style.width = `${armWidth}px`;
            rightArm.style.height = `${armHeight}px`;
            rightArm.style.left = `${left + bodyWidth + armWidth}px`;
            rightArm.style.top = `${top + headSize + 10}px`;
            rightArm.style.zIndex = zIndex;
            gameContainer.appendChild(rightArm);
            dummyParts.push({ element: rightArm, type: 'arm' });

            const leftLeg = document.createElement('div');
            leftLeg.className = 'dummy-leg';
            leftLeg.style.width = `${legWidth}px`;
            leftLeg.style.height = `${legHeight}px`;
            leftLeg.style.left = `${left + armWidth + (bodyWidth - legWidth * 2) / 2}px`;
            leftLeg.style.top = `${top + headSize + bodyHeight}px`;
            leftLeg.style.zIndex = zIndex;
            gameContainer.appendChild(leftLeg);
            dummyParts.push({ element: leftLeg, type: 'leg' });

            const rightLeg = document.createElement('div');
            rightLeg.className = 'dummy-leg';
            rightLeg.style.width = `${legWidth}px`;
            rightLeg.style.height = `${legHeight}px`;
            rightLeg.style.left = `${left + armWidth + (bodyWidth - legWidth * 2) / 2 + legWidth}px`;
            rightLeg.style.top = `${top + headSize + bodyHeight}px`;
            rightLeg.style.zIndex = zIndex;
            gameContainer.appendChild(rightLeg);
            dummyParts.push({ element: rightLeg, type: 'leg' });

            targetAppearTime = Date.now();

            targetTimeout = setTimeout(() => {
                removeDummy();
                targetsHit++;
                timerDisplay.textContent = `目标: ${targetsHit}/20`;

                if (targetsHit < 20) {
                    spawnDummy();
                } else {
                    endGame();
                }
            }, 3000);
        }

        function endGame() {
            gameActive = false;
            console.log('游戏结束，当前目标数:', targetsHit);

            // 计算命中率
            const headPercent = hitStats.totalHits > 0 ?
                Math.round((hitStats.head / hitStats.totalHits) * 100) : 0;
            const bodyPercent = hitStats.totalHits > 0 ?
                Math.round(((hitStats.body + hitStats.arms) / hitStats.totalHits) * 100) : 0;
            const legsPercent = hitStats.totalHits > 0 ?
                Math.round((hitStats.legs / hitStats.totalHits) * 100) : 0;

            const firstSecondPercent = hitStats.totalHits > 0 ?
                Math.round((hitStats.firstSecond / hitStats.totalHits) * 100) : 0;
            const secondSecondPercent = hitStats.totalHits > 0 ?
                Math.round((hitStats.secondSecond / hitStats.totalHits) * 100) : 0;
            const thirdSecondPercent = hitStats.totalHits > 0 ?
                Math.round((hitStats.thirdSecond / hitStats.totalHits) * 100) : 0;

            // 更新显示
            finalScoreDisplay.textContent = score.toFixed(1);
            firstSecondDisplay.textContent = `${firstSecondPercent}%`;
            secondSecondDisplay.textContent = `${secondSecondPercent}%`;
            thirdSecondDisplay.textContent = `${thirdSecondPercent}%`;

            // 创建模型和命中线
            createDummyModel();
            createHitLines(headPercent, bodyPercent, legsPercent);

            // 显示结束界面
            endScreen.style.display = 'flex';
            startScreen.style.display = 'none';

            // 清理游戏元素
            clearObstacles();
            removeDummy();
            clearTimeout(targetTimeout);
        }

        /**
         * 创建结束界面的假人模型
         */
        function createDummyModel() {
            // 清空假人模型容器
            dummyModel.innerHTML = '';

            // 创建假人容器 - 向左移动
            const dummy = document.createElement('div');
            dummy.style.position = 'relative';
            dummy.style.width = '100px';
            dummy.style.height = '150px';
            dummy.style.margin = '0 0 0 20px'; // 左移20px
            dummy.style.float = 'left'; // 添加浮动使指示线可以放在右侧

            // 创建头部
            const head = document.createElement('div');
            head.style.position = 'absolute';
            head.style.width = '30px';
            head.style.height = '30px';
            head.style.borderRadius = '50%';
            head.style.backgroundColor = '#d2b48c';
            head.style.border = '2px solid black';
            head.style.left = '35px';
            head.style.top = '0';
            dummy.appendChild(head);

            // 创建身体
            const body = document.createElement('div');
            body.style.position = 'absolute';
            body.style.width = '40px';
            body.style.height = '50px';
            body.style.backgroundColor = '#d2b48c';
            body.style.border = '2px solid black';
            body.style.borderRadius = '10px';
            body.style.left = '30px';
            body.style.top = '30px';
            dummy.appendChild(body);

            // 创建左臂
            const leftArm = document.createElement('div');
            leftArm.style.position = 'absolute';
            leftArm.style.width = '10px';
            leftArm.style.height = '30px';
            leftArm.style.backgroundColor = '#d2b48c';
            leftArm.style.border = '2px solid black';
            leftArm.style.borderRadius = '5px';
            leftArm.style.left = '20px';
            leftArm.style.top = '45px';
            dummy.appendChild(leftArm);

            // 创建右臂
            const rightArm = document.createElement('div');
            rightArm.style.position = 'absolute';
            rightArm.style.width = '10px';
            rightArm.style.height = '30px';
            rightArm.style.backgroundColor = '#d2b48c';
            rightArm.style.border = '2px solid black';
            rightArm.style.borderRadius = '5px';
            rightArm.style.left = '70px';
            rightArm.style.top = '45px';
            dummy.appendChild(rightArm);

            // 左腿
            const leftLeg = document.createElement('div');
            leftLeg.style.position = 'absolute';
            leftLeg.style.width = '15px';
            leftLeg.style.height = '40px';
            leftLeg.style.backgroundColor = '#d2b48c';
            leftLeg.style.border = '2px solid black';
            leftLeg.style.borderRadius = '3px';
            leftLeg.style.left = '42px';
            leftLeg.style.top = '80px';
            dummy.appendChild(leftLeg);

            // 右腿
            const rightLeg = document.createElement('div');
            rightLeg.style.position = 'absolute';
            rightLeg.style.width = '15px';
            rightLeg.style.height = '40px';
            rightLeg.style.backgroundColor = '#d2b48c';
            rightLeg.style.border = '2px solid black';
            rightLeg.style.borderRadius = '3px';
            rightLeg.style.left = '42px';
            rightLeg.style.top = '80px';
            dummy.appendChild(rightLeg);

            // 将假人添加到模型容器
            dummyModel.appendChild(dummy);
        }

        /**
         * 创建命中率指示线
         * @param {number} startX 起点X坐标（相对于假人右侧）
         * @param {number} startY 起点Y坐标（相对于假人各部位中心）
         * @param {number} length 线长
         * @param {string} text 显示文本
         */
        function createHitLine(startX, startY, length, text) {
            const line = document.createElement('div');
            line.className = 'hit-line';
            line.style.left = `${startX}px`;
            line.style.top = `${startY}px`;
            line.style.width = `${length}px`;

            const label = document.createElement('div');
            label.className = 'hit-label';
            label.textContent = text;
            label.style.left = `${startX + length + 10}px`; // 文本在线段末端右侧10px
            label.style.top = `${startY}px`;

            dummyModel.appendChild(line);
            dummyModel.appendChild(label);
        }

        function createHitLines(headPercent, bodyPercent, legsPercent) {
            // 头部指示线 - 从假人右侧头部位置(100px)向右延伸
            createHitLine(100, 15, 100, `头部: ${headPercent}%`);
            // 身体指示线 - 从假人右侧身体位置(100px)向右延伸
            createHitLine(100, 55, 100, `身体: ${bodyPercent}%`);
            // 腿部指示线 - 从假人右侧腿部位置(100px)向右延伸
            createHitLine(100, 100, 100, `腿部: ${legsPercent}%`);
        }

    </script>
    <!-- 结束JavaScript代码 -->
</body>
<!-- 结束文档主体 -->

</html>
<!-- 结束HTML文档 -->